<template>
  <section class='f-mine'>
    <section class="f-header">
      <div class="g-flex-ct">
        <img style="width: 65px;height: 65px;" src="@/assets/icons/me_icon_head.png" alt="">
        <p style="margin-left: 16px;">{{userInfo.phone || '--'}}</p>
      </div>
      <img style="width: 22px;height: 17px;" src="@/assets/icons/me_icon_notify_f.png" alt="">
    </section>

    <ul class="f-cell-box">
      <li class="f-cell f-mb-16" @click="pageJump('/order')">
        <div class="g-flex-ct">
          <img style="width: 16px;height: 18px;" src="@/assets/icons/me_icon_order.png" alt="">
          <p class="f-ml-10">我的订单</p>
        </div>
        <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
      </li>

      <li class="f-cell f-mb-16" @click="pageJump('/account')">
        <div class="g-flex-ct">
          <img style="width: 16px;height: 19px;" src="@/assets/icons/me_icon_account.png" alt="">
          <p class="f-ml-10">账号与安全</p>
        </div>
        <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
      </li>

      <li class="f-cell f-mb-16" @click="toKF">
        <div class="g-flex-ct">
          <img style="width: 19px;height: 19px;" src="@/assets/icons/me_icon_service.png" alt="">
          <p class="f-ml-10">客服中心</p>
        </div>
        <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
      </li>

      <li class="f-cell f-no-radius-bottom" @click="pageJump('/about')">
        <div class="g-flex-ct">
          <img style="width: 19px;height: 19px;" src="@/assets/icons/me_icon_about.png" alt="">
          <p class="f-ml-10">关于智享</p>
        </div>
        <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
      </li>
      <li class="f-cell f-mb-16 f-no-radius-top" @click="pageJump('/help')">
        <div class="g-flex-ct">
          <img style="width: 19px;height: 19px;" src="@/assets/icons/me_icon_help.png" alt="">
          <p class="f-ml-10">帮助中心</p>
        </div>
        <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
      </li>

      <li class="f-cell" @click="popup = true">
        <div class="g-flex-ct">
          <img style="width: 17px;height: 18px;" src="@/assets/icons/me_icon_share.png" alt="">
          <p class="f-ml-10">分享智享App</p>
        </div>
        <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
      </li>
    </ul>

    <div class="f-flex-ct">
      <van-button style="margin-top: 92px;width: 250px;" type="primary" block round @click="loginOut()">退出登录</van-button>
    </div>

    <van-popup v-model:show="popup" position="bottom" class="f-popup">
      <p>1.扫码下载</p>
      <div class="f-qrcode">
        <qrcode-vue style="width: 120px;height: 120px;" :value="shopQrCode" :size="200" level="H" />
      </div>

      <p>2.分享下载链接</p>
      <ul class="f-ul">
        <li @click="handleShare('微信好友')">
          <img src="@/assets/icons/ic_share_wechat_green.png" alt="">
          <p>微信好友</p>
        </li>
        <li>
          <img src="@/assets/icons/ic_share_ding_blue.png" alt="">
          <p>钉钉</p>
        </li>
        <li @click="handleShare('朋友圈')">
          <img src="@/assets/icons/ic_share_moments_green.png" alt="">
          <p>朋友圈</p>
        </li>
        <li>
          <img src="@/assets/icons/ic_share_message_white.png" alt="">
          <p>短信</p>
        </li>
        <li @click="handleShare('复制链接')">
          <img src="@/assets/icons/icon_copy.png" alt="">
          <p>复制</p>
        </li>
      </ul>

      <div class="f-btn">
        <van-button style="width: 250px;color:#666666" block round color="#DADADA" @click="popup = false">取消</van-button>
      </div>
    </van-popup>
  </section>
</template>
  
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { removeStore, warningDeal, successDeal, getStore } from '@/utils/utils';
import { showConfirmDialog } from 'vant';
import api from './api'
import QrcodeVue from 'qrcode.vue'
import JsBridge from '@/utils/JsBridge.js'

export default {
  components: { QrcodeVue },

  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      userInfo: getStore('USER_INFO'),
      popup: false,

      shopQrCode: ''
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '',
        show: false,
      });

      getDomain()
    })

    const getDomain = () => {
      JsBridge.callHandler('getDomain', {}, (response) => {
        let domain = JSON.parse(response).data.domain
        state.shopQrCode = getUrl(domain)
      })
    }

    const getUrl = (domain) => {
      let url = `${domain}/h5/#/shareH5`
      return url
    }

    const pageJump = (path) => {
      router.push({
        path
      })
    }

    const loginOut = () => {
      showConfirmDialog({
        title: '提示',
        message: '您确定要退出登录吗？',
      }).then(() => {
        api.quit().then(res => {
          removeStore('USER_INFO')
          router.replace('/')
        }).catch(err => {
          removeStore('USER_INFO')
          router.replace('/')
        })
      })
    }

    const handleShare = (name) => {
      if (name == '保存图片') {
        downloadPoster(state.posterImgURL, state.posterData.goodsName)
      }
      if (name == '微信好友') {
        let url = state.shopQrCode
        const data = {
          type: "wechat_session",
          url: url,
          key: "wx8184c53144df49b0",
          title: '智享App',
          description: '智享App'
        }
        JsBridge.callHandler('share', data, (res) => {
          console.log('share 响应值 ： ', res);
        })
      }
      if (name == '朋友圈') {
        let url = state.shopQrCode
        const data = {
          type: "wechat_pyq",
          url: url,
          key: "wx8184c53144df49b0",
          title: '智享App',
          description: '智享App'
        }
        JsBridge.callHandler('share', data, (res) => {
          console.log('share 响应值 ： ', res);
        })
      }
      if (name == '复制链接') {
        handleCopy()
      }
    }

    function handleCopy() {
      const input = document.createElement('input');
      document.body.appendChild(input)

      let url = state.shopQrCode
      input.setAttribute('value', url);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    // 打开客服
    const toKF = () => {
      let json = {
        appid: 'wx8184c53144df49b0', // 基座appId
        corpId: 'ww7a13be32a551585b', // 企业id
        url: 'https://work.weixin.qq.com/kfid/kfc06dc254e586f06b9', // 企业客服链接
      }
      JsBridge.callHandler('toKF', json, (response) => { })
    }

    return {
      ...toRefs(state),
      pageJump,
      loginOut,
      handleShare,
      handleCopy,
      toKF,
    }
  }
}
</script>
  
<style lang='scss' scoped>
.f-mine {
  background-image: url("@/assets/imgs/me_bg_title.png");
  background-repeat: no-repeat;
  background-size: 100% 183px;
  padding: 56px 14px;
  .f-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 19px;
    color: #000000;
  }
  .f-cell-box {
    margin-top: 33px;
    .f-cell {
      position: relative;
      padding: 18px 11px;
      background: #ffffff;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 16px;
      color: #000000;
    }
    .f-mb-16 {
      margin-bottom: 16px;
    }
    .f-no-radius-bottom {
      border-radius: 7px 7px 0 0;
    }
    .f-no-radius-bottom::before {
      content: "";
      width: 94%;
      height: 1px;
      background: rgba(170, 170, 170, 0.2);
      position: absolute;
      bottom: 0;
      left: 2%;
    }
    .f-no-radius-top {
      border-radius: 0 0 7px 7px;
    }
  }
  .f-popup {
    font-weight: 300;
    font-size: 14px;
    color: #424242;
    padding: 18px 13px 13px 15px;
    .f-qrcode {
      text-align: center;
      margin: 20px 0;
    }
    .f-ul {
      margin-top: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      li {
        text-align: center;
        img {
          width: 47px;
          height: 47px;
          margin-bottom: 5px;
        }
      }
    }
    .f-btn {
      display: flex;
      justify-content: center;
      margin: 26px 0 10px 0;
    }
  }
}
</style>